/* SPDX-License-Identifier: Apache-2.0 */

/*
  Tables for displaying data about a project, release or file.

  <table class="table">
    <caption class="sr-only">Caption for table</caption>
    <thead>
      <tr>
        <th scope="col">Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Row title</th>
        <td>Data</td>
      </tr>
    </tbody>
  </table>

  Note:
    Elements applied to this component will differ based on the table.
    e.g. the downloads table will contain 'table__upload-date' to represent the
    upload column on that table.

  Accessibility:
    - label the table with caption (for screen reader users)
    - Add 'scope="col"' to column headings
    - Use a th and add 'scope="row"' for row headings

   Modifiers:
     - information: table for displaying table data - ideally with row level headings
     - downloads: specific styles for downloads table on project detail page
     - releases: specific styles for releases table on manage project page
     - files: specific styles for files table on releases tab
     - history: specific styles for project journals
     - hashes: specific styles for the hashes table on an individual file
     - collaborators: specific styles for managing a project's collaborators
     - emails: specific styles for emails on the manage account page
     - 2fa: specific styles for 2fa methods on the manage account page
     - api-tokens: specific styles for API tokens on the manage account page
     - security-logs: specific styles for security logs on the manage account page

 */

// TABLE
@mixin mobile-friendly-table {
  border-bottom: 1px solid $base-grey;

  thead {
    display: none;
  }

  tbody tr th,
  tbody tr td,
  tbody tr th:first-child,
  tbody tr td:first-child,
  tbody tr th:last-child,
  tbody tr td:last-child {
    display: block;
    width: 100%;
    text-align: left;
    border-bottom: 0;
    padding: 2px 0;
  }

  tbody tr td:first-child,
  tbody tr th:first-child {
    border-top: 1px solid $base-grey;
    padding-top: 15px;

    .table__mobile-label {
      margin-top: 0;
    }
  }

  tbody tr td:last-child {
    padding-bottom: 15px;
  }

  .table__mobile-label {
    display: block;
    margin-top: 5px;
  }

  .table__align-right {
    text-align: left;
  }

  tbody tr td .dropdown {
    display: block;
    float: none;

    .dropdown__content,
    .dropdown__link {
      width: unset;
      right: auto;
    }
  }

  tbody tr td .button {
    margin-top: 5px;
  }
}

.table {
  width: 100%;
  border: 0;
  box-sizing: border-box;
  box-shadow: none;
  background-color: transparent;
  text-align: left;

  thead tr {
    background-color: transparent;
  }

  tbody tr,
  th,
  td {
    border: 0;
    background-color: transparent;
    padding: 10px;
  }

  tbody tr th {
    font-weight: $bold-font-weight;
  }

  th,
  td {
    border-bottom: 1px solid $base-grey;
  }

  tr th:first-child,
  tr td:first-child {
    padding-left: 0;
  }

  tr th:last-child,
  tr td:last-child {
    padding-right: 0;
  }

  tbody tr:last-child td,
  tbody tr:last-child th {
    border-bottom: 0;
  }

  &__align-left {
    text-align: left;
  }

  &__align-center {
    text-align: center;
  }

  &__align-right {
    text-align: right;
  }


  &__mobile-label {
    display: none;
    font-weight: $bold-font-weight;
  }

  // Custom table styles

  &--information {
    th {
      width: 1%; 
      white-space: nowrap; 
    }

    td,
    th {
      vertical-align: baseline;
    }

    @media only screen and (max-width: $mobile) {
      @include mobile-friendly-table;
    }
  }

  &--downloads {
    word-wrap: break-word;
    margin-top: $half-spacing-unit;

    td .button span {
      display: none;
    }

    @media only screen and (max-width: $tablet) {
      @include mobile-friendly-table;
      margin-bottom: $half-spacing-unit;
    }
  }

  &--releases {
    word-wrap: break-word;
    margin-bottom: $spacing-unit;

    @media only screen and (max-width: $small-tablet) {
      @include mobile-friendly-table;
      margin-bottom: $half-spacing-unit;
    }
  }

  &--files,
  &--history {
    margin-top: $half-spacing-unit;

    @media only screen and (max-width: $tablet) {
      @include mobile-friendly-table;
    }
  }

  &--hashes {
    padding: 0 10px;

    td code {
      word-break: break-all;
    }

    @media only screen and (max-width: $mobile) {
      @include mobile-friendly-table;
      margin-top: 0;

      td .button {
        &::after {
          top: 100%;
          right: 50%;
          margin-top: 5px;
          margin-right: auto;
          bottom: auto;
          transform: translate(50%, 0);
        }

        &::before {
          inset: auto, 50%, -5px, auto;
          margin-right: -5px;
          border-color: transparent;
          border-bottom-color: transparentize($black, 0.3);
        }
      }
    }
  }

  &--collaborators {
    td:empty::after {
      content: "—";
    }

    .table__user-details {
      display: flex;
      align-items: center;
      @include link-without-underline;
    }

    .table__user-gravatar {
      display: block;
      width: 50px;
      flex-shrink: 0;
      text-align: center;
    }

    .table__user-text {
      margin-left: 10px;
      text-align: left;

      > * {
        display: inline-block;
        background-position: 0 1.15em;
        background-repeat: repeat-x;
        background-size: 100% 1.5px;
        @include primary-underlined-link;
      }
    }

    .table__change-field {
      margin-left: -10px;
      width: 120px;
    }

    .table__change-button {
      margin-left: 10px;
      margin-top: 5px;
      visibility: hidden;
    }

    @media only screen and (max-width: $small-tablet) {
      @include mobile-friendly-table;

      .table__user-details {
        margin-bottom: 5px;
      }

      .table__change-role {
        width: 100%;

        .table__change-field,
        .table__change-button {
          margin-left: 0;
          width: 100%;
        }
      }
    }
  }

  &--emails {
    margin: 0 0 $spacing-unit;

    .table__email {
      word-wrap: break-word;
      word-break: break-all;
      font-family: $code-font;
      font-size: 0.9rem;
    }

    .table__status-badges {
      display: block;
      min-width: 160px;
    }

    .table__status-detail {
      display: block;
      max-width: 200px;
      font-size: $small-font-size;
      margin-top: 5px;
    }

    @media only screen and (max-width: $small-tablet) {
      @include mobile-friendly-table;

      .table__status-detail {
        max-width: initial;
      }
    }
  }

  &--2fa,
  &--api-tokens {
    margin: 0 0 $spacing-unit;

    @media only screen and (max-width: $small-tablet) {
      @include mobile-friendly-table;
    }
  }

  &--security-logs {
    margin-top: 0;

    .table__monospace {
      word-wrap: break-word;
      word-break: break-all;
      font-family: $code-font;
      font-size: 95%;
    }

    td {
      small,
      strong {
        display: block;
      }
    }

    @media only screen and (max-width: $small-tablet) {
      @include mobile-friendly-table;
    }
  }

  &--publisher-list {
    margin-top: 0;

    .table__monospace {
      word-wrap: break-word;
      word-break: break-all;
      font-family: $code-font;
      font-size: 95%;
    }

    td {
      small,
      strong {
        display: block;
      }
    }

    @media only screen and (max-width: $small-tablet) {
      @include mobile-friendly-table;
    }
  }

  td {
    &.table__no-bottom-border {
      border-bottom: none;
    }
  }

}
